{% extends "base.html" %}

{% block link %}
    <link href="/static/css/index.css" rel="stylesheet"/>
    <link href="/static/css/blog.css" rel="stylesheet"/>{% endblock %}

{% block body %}
    <div class="blog-body">
        <div class="layui-carousel blog-bg" id="carousel" lay-anim="default" lay-indicator="inside" lay-arrow="always"
             style="width: 1170px; height: 360px;">
            <div carousel-item="">
                <div class="bg bg_a">
                    <a href="#"></a>
                </div>
                <div class="bg bg_b">
                    <a href="/article/4"></a>
                </div>
                <div class="bg bg_c layui-this">
                    <a href="#"></a>
                </div>
                <div class="bg bg_d">
                    <a href="#"></a>
                </div>
                <div class="bg bg_e">
                    <a href="#"></a>
                </div>
            </div>
            <div class="layui-carousel-ind">
                <ul>
                    <li class=""></li>
                    <li class=""></li>
                    <li class="layui-this"></li>
                    <li class=""></li>
                    <li class=""></li>
                </ul>
            </div>
            <button class="layui-icon layui-carousel-arrow" lay-type="sub"> <<<</button>
            <button class="layui-icon layui-carousel-arrow" lay-type="add"> >>></button>
        </div>
        <div class="blog-container">
            <div class="blog-main">

                <div class="home-tips shadow">
                    <i style="float:left;line-height:17px;" class="fa fa-volume-up"></i>
                    <div class="home-tips-container">
							<span style="color: rgb(0, 150, 136); cursor: pointer; display: none;"><p><span>本网站仍处于开发中，有bug请与我联系QQ:1839335818</span></p>
							</span><span style="color: rgb(0, 150, 136); cursor: pointer; display: block;"><p><span>HP News&nbsp; —— &nbsp;一个专注于电商动态的新闻网站</span></p>
							</span><span style="color: rgb(0, 150, 136); cursor: pointer; display: none;">感谢您发现本站，由于某些原因导致数据库丢失，但本站内容会持续更新的。</span>
                    </div>
                </div>

                <div class="blog-main-left animated slideInLeft">
                    <div class="flow-default" id="parentArticleList">
                        <!--                    文章列表-->
                        {% for article in article_list %}
                            <div class="article shadow animated zoomIn" data-id="{{ article.id }}">
                                <div class="article-left ">
                                    <img src="{{ article.index_image_url }}" alt="Tomcat优化性能，JVM优化">
                                </div>
                                <div class="article-right">
                                    <div class="article-title">
                                        <span class="article_is_top">置顶</span>&nbsp;<span
                                            class="article_is_yc">原创</span>&nbsp;
                                        <a href="/article/{{ article.id }}">{{ article.title }}</a>
                                    </div>
                                    <div class="article-abstract">
                                        {{ article.digest }}
                                    </div>
                                </div>
                                <div class="clear"></div>
                                <div class="article-footer">
                                    <span><i class="fa fa-clock-o"></i>&nbsp;&nbsp;{{ article.create_at }}</span>
                                    <span class="article-author"><i
                                            class="fa fa-user"></i>&nbsp;&nbsp;' {{ article.source }}</span>
                                    <span><i class="fa fa-tag"></i>&nbsp;&nbsp;<a
                                            href="javascript:classifyList({{ article.category_id }});">{% for cate in cate_list %}
                                        {% if cate.id==article.category_id %}
                                            {{ cate.name }}
                                        {% else %}

                                        {% endif %}
                                    {% endfor %}
                                        </a></span>
                                    <span class="article-viewinfo"><i
                                            class="fa fa-eye"></i>&nbsp;{{ article.clicks }}</span>
                                    <span class="article-viewinfo"><i
                                            class="fa fa-commenting"></i>&nbsp;{{ article.comment_list.count() }}</span>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                    <div class="layui-flow-more">
                        {#                            <div id="demo-laypage-limits"></div>#}
                        <a href="javascript:loadMore();"><cite>加载更多</cite></a>
                    </div>
                </div>


                <div class="blog-main-right">

                    <div class="blogerinfo shadow animated fadeInRight">
                        <div class="blogerinfo-figure">
                            <img src="/static/img/admin.jpg" alt="竹林听雨">
                        </div>
                        <p class="blogerinfo-nickname"><a href="/about">麻海鹏</a></p>
                        <p class="blogerinfo-introduce">有个被嘲笑的梦想万一有天实现了呢？up up~</p>
                        <p class="blogerinfo-location"><i class="fa fa-location-arrow"></i>&nbsp;<span>四川-成都</span>
                        </p>
                        <hr>
                        <div class="blogerinfo-contact">
                            <a target="_blank" id="QQjl" title="QQ交流"
                               href="http://shang.qq.com/email/stop/email_stop.html?qq=3139312973"><i
                                    class="fa fa-qq fa-2x"></i></a>
                            <a target="_blank" id="gwxx" title="给我写信" href="mailto:3139312973@qq.com"><i
                                    class="fa fa-envelope fa-2x"></i></a>
                            <a target="_blank" id="xlwb" title="新浪微博" href="https://weibo.com/p/1005055534423586"><i
                                    class="fa fa-weibo fa-2x"></i></a>
                            {% if  not current_user.is_admin %}
                                <a target="" title="后台管理" href="javascript:isAdmin();"><i
                                        class="fa fa-database fa-2x"></i></a>
                            {% else %}
                                <a target="_blank" title="后台管理" href="/admin"><i
                                        class="fa fa-database fa-2x"></i></a>
                            {% endif %}
                        </div>
                    </div>

                    <div class="layui-tab layui-tab-brief shadow animated fadeInRight" lay-filter="docDemoTabBrief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">点击排行</li>
                            <li>站长推荐</li>
                        </ul>
                        <div class="layui-tab-content">
                            {# 点击排行 #}
                            <div class="layui-tab-item layui-show">
                                <ul class="blog-module-ul">
                                    <li>
											<span>
<i class="layui-badge-rim layui-bg-red">1</i>
</span> &nbsp;&nbsp;
                                        <a href="/article/103">双11收官与新红利周期：阿里妈妈助海尔、金典、周大福等突破增量新高峰</a>
                                    </li>
                                    <li>
											<span>
<i class="layui-badge-rim layui-bg-orange">2</i>
</span> &nbsp;&nbsp;
                                        <a href="/article/7">敦煌网集团黑五网一创新玩法，点燃购物狂潮，优势全面升级</a>
                                    </li>
                                    <li>
											<span>
<i class="layui-badge-rim layui-bg-green">3</i>
</span> &nbsp;&nbsp;
                                        <a href="/article/2">Adjust最新增长指数为移动应用从业者指明全球获客机遇</a>
                                    </li>
                                    <li>
											<span>
<i class="layui-badge-rim">4</i>
</span> &nbsp;&nbsp;
                                        <a href="/article/10">赫力昂定制营养新平台Key科益家亮相进博会 开启个性化定制营养新时代</a>
                                    </li>
                                </ul>
                            </div>
                            {# 站长推荐 #}
                            <div class="layui-tab-item">
                                <ul class="blog-module-ul">
                                    <li>
                                        <span class="article_is_yc">原创</span> &nbsp;&nbsp;
                                        <a href="/article/103">双11收官与新红利周期：阿里妈妈助海尔、金典、周大福等突破增量新高峰</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="blog-module shadow animated fadeInRight">
                        <div class="blog-module-title"><i class="fa fa-file-text-o"></i>&nbsp;博主介绍</div>
                        <p>HP News 一个专注于电商行业最新动态的网站</p>
                    </div>
                    <div class="blog-module shadow animated fadeInRight fadeInUp">
                        <div class="blog-module-title"><i class="layui-icon"></i>&nbsp;热评用户</div>
                        <ul class="hotusers-list">
                            <li class="hotusers-list-item">
                                <div class="hotusers-top hotusers-num">1</div>
                                <div class="hotusers-avator">
                                    <img src="http://qzapp.qlogo.cn/qzapp/101477629/B5D5212D0429E4491D932EEEF814FE99/100"
                                         width="45" height="45">
                                </div>
                                <div>
                                    <div class="hotusers-nick">Mr.Long</div>
                                    <span class="hotusers-level" title="等级1"
                                          style="background-image: url(https://changyan.itc.cn/v2/asset/scs/imgs/p-lv01.png);">
<i style=" background-image:url(https://changyan.itc.cn/v2/asset/scs/imgs/p-lv01-04.png);">潜水</i>
</span>
                                    <span class="hotusers-totalcmt">本站评论数：4</span>
                                </div>
                                <span class="hotusers-icons"></span>
                            </li>
                            <li class="hotusers-list-item">
                                <div class="hotusers-top hotusers-num">2</div>
                                <div class="hotusers-avator">
                                    <img src="http://qzapp.qlogo.cn/qzapp/101477629/142350DC6080D761759CA72042447829/100"
                                         width="45" height="45">
                                </div>
                                <div>
                                    <div class="hotusers-nick">十七</div>
                                    <span class="hotusers-level" title="等级2"
                                          style="background-image: url(https://changyan.itc.cn/v2/asset/scs/imgs/p-lv02.png);">
<i style=" background-image:url(https://changyan.itc.cn/v2/asset/scs/imgs/p-lv01-04.png);">潜水</i>
</span>
                                    <span class="hotusers-totalcmt">本站评论数：2</span>
                                </div>
                                <span class="hotusers-icons"></span>
                            </li>
                            <li class="hotusers-list-item">
                                <div class="hotusers-top hotusers-num">3</div>
                                <div class="hotusers-avator">
                                    <img src="http://qzapp.qlogo.cn/qzapp/101477629/436C863FE45FEBC7D279B0C22E9A62FD/100"
                                         width="45" height="45">
                                </div>
                                <div>
                                    <div class="hotusers-nick">默〃</div>
                                    <span class="hotusers-level" title="等级3"
                                          style="background-image: url(https://changyan.itc.cn/v2/asset/scs/imgs/p-lv03.png);">
<i style=" background-image:url(https://changyan.itc.cn/v2/asset/scs/imgs/p-lv01-04.png);">潜水</i>
</span>
                                    <span class="hotusers-totalcmt">本站评论数：2</span>
                                </div>
                                <span class="hotusers-icons"></span>
                            </li>
                            <li class="hotusers-list-item">
                                <div class="hotusers-top hotusers-num">4</div>
                                <div class="hotusers-avator">
                                    <img src="http://qzapp.qlogo.cn/qzapp/101477629/2F1EDDE252859E5FF645F959893C6863/100"
                                         width="45" height="45">
                                </div>
                                <div>
                                    <div class="hotusers-nick">Single</div>
                                    <span class="hotusers-level" title="等级4"
                                          style="background-image: url(https://changyan.itc.cn/v2/asset/scs/imgs/p-lv04.png);">
<i style=" background-image:url(https://changyan.itc.cn/v2/asset/scs/imgs/p-lv01-04.png);">潜水</i>
</span>
                                    <span class="hotusers-totalcmt">本站评论数：1</span>
                                </div>
                                <span class="hotusers-icons"></span>
                            </li>
                            <li class="hotusers-list-item">
                                <div class="hotusers-top hotusers-num">5</div>
                                <div class="hotusers-avator">
                                    <img src="http://qzapp.qlogo.cn/qzapp/101477629/0ABFEA14AAF50D3C07B6489440FEE081/100"
                                         width="45" height="45">
                                </div>
                                <div>
                                    <div class="hotusers-nick">一念之间</div>
                                    <span class="hotusers-level" title="等级5"
                                          style="background-image: url(https://changyan.itc.cn/v2/asset/scs/imgs/p-lv05.png);">
<i style=" background-image:url(https://changyan.itc.cn/v2/asset/scs/imgs/p-lv01-04.png);">潜水</i>
</span>
                                    <span class="hotusers-totalcmt">本站评论数：1</span>
                                </div>
                                <span class="hotusers-icons"></span>
                            </li>
                        </ul>
                    </div>
                    <div class="blog-module shadow animated fadeInRight fadeInUp">
                        <div class="blog-module-title"><i class="layui-icon"></i>&nbsp;最近评论</div>
                        <ul class="recent-list">
                            <li class="hotusers-list-item">
                                <div data-name="那么平凡。" class="remark-user-avator">
                                    <img src="http://qzapp.qlogo.cn/qzapp/101477629/194135EDCD4659E5550C71D6D665F3CB/100"
                                         width="45" height="45">
                                </div>
                                <div class="remark-content">电商是做什么的？</div>
                                <span class="hotusers-icons"></span>
                            </li>
                            <li class="hotusers-list-item">
                                <div data-name="开始了就别停下来" class="remark-user-avator">
                                    <img src="http://qzapp.qlogo.cn/qzapp/101477629/436973EA919FEE0B67860BEC897ECC70/100"
                                         width="45" height="45">
                                </div>
                                <div class="remark-content">电商平台是啥</div>
                                <span class="hotusers-icons"></span>
                            </li>
                            <li class="hotusers-list-item">
                                <div data-name="【阿龙】" class="remark-user-avator">
                                    <img src="http://qzapp.qlogo.cn/qzapp/101477629/6B925BE6DA65C32DCBE03772E56AA6C6/100"
                                         width="45" height="45">
                                </div>
                                <div class="remark-content">我想学电商运营。。。</div>
                                <span class="hotusers-icons"></span>
                            </li>
                            <li class="hotusers-list-item">
                                <div data-name="Mr.Long" class="remark-user-avator">
                                    <img src="http://qzapp.qlogo.cn/qzapp/101477629/B5D5212D0429E4491D932EEEF814FE99/100"
                                         width="45" height="45">
                                </div>
                                <div class="remark-content">博主教我搭建电商网站~~</div>
                                <span class="hotusers-icons"></span>
                            </li>
                            <li class="hotusers-list-item">
                                <div data-name="清风" class="remark-user-avator">
                                    <img src="http://qzapp.qlogo.cn/qzapp/101477629/B4901BFB60F8DEE83F01692F2544E612/100"
                                         width="45" height="45">
                                </div>
                                <div class="remark-content">
                                    <p>还有其他相关的电商咨询吗</p>
                                    <p><br></p>
                                </div>
                                <span class="hotusers-icons"></span>
                            </li>
                            <li class="hotusers-list-item">
                                <div data-name="Mr.Long" class="remark-user-avator">
                                    <img src="http://qzapp.qlogo.cn/qzapp/101477629/B5D5212D0429E4491D932EEEF814FE99/100"
                                         width="45" height="45">
                                </div>
                                <div class="remark-content">。。。。。。。。。。</div>
                                <span class="hotusers-icons"></span>
                            </li>
                            <li class="hotusers-list-item">
                                <div data-name="默〃" class="remark-user-avator">
                                    <img src="http://qzapp.qlogo.cn/qzapp/101477629/436C863FE45FEBC7D279B0C22E9A62FD/100"
                                         width="45" height="45">
                                </div>
                                <div class="remark-content">
                                    <p>旧时光博客博主&nbsp;https://www.zqfirst.top 来过</p>
                                </div>
                                <span class="hotusers-icons"></span>
                            </li>
                            <li class="hotusers-list-item">
                                <div data-name="默〃" class="remark-user-avator">
                                    <img src="http://qzapp.qlogo.cn/qzapp/101477629/436C863FE45FEBC7D279B0C22E9A62FD/100"
                                         width="45" height="45">
                                </div>
                                <div class="remark-content">网站不错，继续加油。</div>
                                <span class="hotusers-icons"></span>
                            </li>
                            <li class="hotusers-list-item">
                                <div data-name="十七" class="remark-user-avator">
                                    <img src="http://qzapp.qlogo.cn/qzapp/101477629/142350DC6080D761759CA72042447829/100"
                                         width="45" height="45">
                                </div>
                                <div class="remark-content">网站不错，学到东西了</div>
                                <span class="hotusers-icons"></span>
                            </li>
                        </ul>
                    </div>

                    <div class="blog-module shadow animated fadeInRight">
                        <div class="blog-module-title"><i class="fa fa-link"></i>&nbsp;友情链接</div>
                        <ul class="blogroll">
                            <li>
{#                                <a target="_blank" href="http://wurao.xin" title="勿扰博客">勿扰博客</a>#}
                                <a target="_blank" href="https://www.dsb.cn/news" title="电商报">电商报</a>
                            </li>
                            <li>
{#                                <a target="_blank" href="http://blog.itcodai.com" title="ITcodai博客">ITcodai博客</a>#}
                                <a target="_blank" href="https://www.cndsw.com.cn" title="电商网">电商网</a>
                            </li>
                            <li>
{#                                <a target="_blank" href="https://www.zqfirst.top" title="旧时光">旧时光</a>#}
                                <a target="_blank" href="http://www.news.cn/" title="新华网">新华网</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
{% endblock %}


{% block js %}
    <script>
      function classifyList(id) {
        layer.msg('功能要自己写');
      }
    </script>
    <script>
      function loadMore() {
        var existingArticles = $('.article.shadow.animated.zoomIn').map(function() {
          return $(this).text();
        }).get();
        $.post('/append_data',
            {lastArticleId: $('.article.shadow.animated.zoomIn').last().data('id'), existingArticles: existingArticles},
            function(res) {
              // res is the response from the server, which contains the new articles
              if (res.new_articles[0] === '文章已经到底了') {
                layui.layer.msg('文章已经到底了');
              } else {
                layui.each(res.new_articles, function(index, item) {
                  var newArticle = '<div class="article shadow animated zoomIn" data-id="' + item.id + '">' +
                      '<div class="article-left ">' +
                      '<img src="' + item.index_image_url + '" alt="' + item.title + '">' +
                      '</div>' +
                      '<div class="article-right">' +
                      '<div class="article-title">' +
                      '<span class="article_is_top">置顶</span>&nbsp;<span class="article_is_yc">原创</span>&nbsp;' +
                      '<a href="/article/' + item.id + '">' + item.title + '</a>' +
                      '</div>' +
                      '<div class="article-abstract">' +
                      item.digest +
                      '</div>' +
                      '</div>' +
                      '<div class="clear"></div>' +
                      '<div class="article-footer">' +
                      '<span><i class="fa fa-clock-o"></i>&nbsp;&nbsp;' + item.create_at + '</span>' +
                      '<span class="article-author"><i class="fa fa-user"></i>&nbsp;&nbsp;' + item.source + '</span>' +
                      '<span><i class="fa fa-tag"></i>&nbsp;&nbsp;<a href="javascript:classifyList(' +
                      item.category_id + ');">' + item.category_name + '</a></span>' +
                      '<span class="article-viewinfo"><i class="fa fa-eye"></i>&nbsp;' + item.clicks + '</span>' +
                      '<span class="article-viewinfo"><i class="fa fa-commenting"></i>&nbsp;0</span>' +
                      '</div>' +
                      '</div>';
                  $('#parentArticleList').
                      append(newArticle); // Append new articles to the list
                });
              }
            });
      }
    </script>
    <script>
      function isAdmin() {
        layer.msg('你还不是管理员哦~~~~');
      }
    </script>
{% endblock %}